【每日一练】97—美丽画卷折叠效果
文 | 杨小爱
写在前面
在学习和提升自我技能与不断精进的道路上，我们没有办法否认大量刻意练习的作用。
因此，我开设了【每日一练】这个栏目，希望通过这个栏目的内容，养成持续学习与刻意练习的习惯，坚持每天学习一点点，每天进步一点点，坚持持续性的学习。
对于学习，真的没有什么灵丹妙药，也没有什么21天成为大咖的快速方法，有的就是每日不断的学习。
到今天为至，【每日一练】已经来到了第97练，在今天，我又给【每日一练】定了一个新目标，完成1000个小练习。
在第100练的时候，我会将所有【每日一练】写成一个列表效果，往后，每满100练，我将写一个列表效果，第一，为了便于查阅之前的所有练习，第二，也是为了做了一个按时间线完成的练习。
当然，如果后面时间充裕，我会考虑将每个练习按照技术实现做一些归类整理。
现在，我们一起来看下今天的练习效果：
这个效果，其实，在平面设计时候，是经常会见到的，但是通过代码来实现这样的效果，应该是比较少见的，下面我们就一起来看看这个效果的实现代码。
另外说明一下，关于一些练习中的图片素材，我真的就是直接到图片素材网站上自行下载的，大家也可以自行到图片库网站上去自行下载获取。
像https://pixabay.com/；https://unsplash.com/；https://www.pinterest.com/这些网站上都有很多免费图片可以使用。
当然，我也在博客网站上整理了一些图片网站的网网址供大家使用，网址导航地址：http://www.webqdkf.com/webdh/desigdh.html
因为网址导航内容还在逐步整理中，像电子书的网址导航，目前还在本地，没有上传至服务器，如果大家点开后，觉得没有内容，请不要觉得奇怪。
包括一些工作室的内容，目前也是在逐步制作完善中......
说了这么多，下面大家一起来看代码吧。
HTML代码：
<!doctype html><html> <head> <meta charset="utf-8"> <title>【每日一练】97—美丽画卷折叠效果</title> </head> <body> <div> <span style="--i:0;"></span> <span style="--i:1;"></span> <span style="--i:2;"></span> <span style="--i:3;"></span> </div> </body></html>
*{ margin: 0; padding: 0;}body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #444;}div{ width: 640px; height: 360px; display: flex; transition: 0.5s; transform: rotate(-25deg) skew(25deg) translate(0,0);}div:hover { transform: rotate(-25deg) skew(-25deg) translate(0,-20px);}div span{ list-style: none; width: 25%; background: url(01.jpg); background-position: calc(-160px * var(--i)); background-size: cover; height: 100%; transition: .5s; border-top: 5px solid #fff; border-bottom: 5px solid #fff;}div:hover span:nth-child(odd){ transform: skewY(25deg); box-shadow: inset 20px 0 50px rgba(0,0,0,.5);}div:hover span:nth-child(even){ transform: skewY(-25deg); box-shadow: inset 20px 0 50px rgba(0,0,0,.5);}div span:first-child{ border-left: 5px solid #fff;}div span:last-child{ border-right: 5px solid #fff;}
写在最后
第97个【每日一练】的内容到这里就结束了，希望今天的小练习对你有帮助，如果你觉得有用的话，请点赞我，关注我，并将它分享给你身边热爱编程的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
学习更多技能
请点击下方公众号